<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        dt {
            background: red;
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 10px;
        }
        dd {
            margin-left: 40px;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('dt').on('click',function () {
                $(this).parent().find('dd').slideToggle(500);
        })
        })
    </script>
</head>
<body>
<dl>
    <dt>收藏夹</dt>
    <dd>桌面</dd>
    <dd>最近访问的位置</dd>
</dl>
<dl>
    <dt>库</dt>
    <dd>Git</dd>
    <dd>暴风影视库</dd>
    <dd>视频</dd>
    <dd>图片</dd>
    <dd>文档</dd>
    <dd>迅雷下载</dd>
    <dd>音乐</dd>
</dl>
<dl>
    <dt>计算机</dt>
    <dd>本地C盘</dd>
    <dd>本地D盘</dd>
    <dd>本地E盘</dd>
    <dd>本地F盘</dd>
</dl>
</body>
</html>